
<template>
	<div class="tag-box" :class="`${type === 'input' ? 'el-input__inner' : 'el-textarea__inner'}`">
		<div v-if="value && isValue" class="tag">
			<el-tooltip effect="dark" :content="value" placement="top-start">
				<span>{{ value }}</span>
			</el-tooltip>
			<i v-if="!disabled" class="el-icon-close" @click="deleteDate"></i>
		</div>
		<el-input
			v-if="!value || !isValue"
			v-model="content"
			v-bind="$attrs"
			v-on="$listeners"
			:type="type"
			:disabled="disabled"
		>
		</el-input>
	</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component({
  components: {}
})
export default class extends Vue {
  @Prop({ default: '' }) public value!: any;
  @Prop({ default: 'input' }) public type!: any;
  @Prop({ default: false }) public disabled!: any;
  private newValue = ''; // 保存零时的值
  private isValue = true;
  private deleteDate () {
    this.isValue = false;
    this.$emit('close-tag', '');
  }

  private mounted () {
    if (!this.value) {
      this.isValue = false;
    }
  }

  private get content () {
    return this.newValue;
  }

  private set content (val) {
    this.newValue = val;
    this.$emit('input', val);
  }
}
</script>
<style lang="stylus" scoped>
	.tag-box {
		display flex
		padding 0
		&.el-input__inner {
			height 32px
			line-height 32px
			overflow hidden
		}
		&.el-textarea__inner {
			min-height 32px
		}
		.tag {
			padding 0px 5px
			background rgba(0, 0, 0, 0.03)
			border-radius 2px
			padding-right 25px
			position relative
			white-space nowrap
			line-height 26px
			position relative
			max-width 150px
			overflow hidden
			white-space nowrap
			text-overflow ellipsis
			top 2px
			// transform translateY(-50%)
			height 26px
			.el-icon-close {
				position absolute
				top 7px
				right 5px
				cursor pointer
			}
		}
		.el-input {
			/deep/ .el-input__inner {
				border 0
			}
		}
		.el-textarea {
			/deep/ .el-textarea__inner {
				border 0
			}
		}
	}
</style>
